import { useIntersectionObserver } from '@vueuse/core'
import { DirectiveBinding } from 'vue';

// 定义懒加载插件
export const lazyPlugin = {
    install(app: any) {
        //懒加载指令逻辑
        app.directive('img-lazy', {
            mounted(el: HTMLElement, binding: DirectiveBinding) {
                const { stop } = useIntersectionObserver(
                    el,
                    ([{ isIntersecting }]) => {
                        // console.log(isIntersecting);
                        if (isIntersecting) {
                            const img = el as HTMLImageElement;
                            //进入视口区域
                            img.src = binding.value
                            stop()
                        }
                    },
                )
            }
        })
    }
}

// 注册一个全局自定义指令 `v-lazy-video`视频懒加载
export const lazyVideo = {
    install(app: any) {
        app.directive('lazy-video', {
            mounted: function (el: HTMLElement, binding: DirectiveBinding) {
                const videoSrc = binding.value;
                const width = binding.arg || '120'; // 默认宽度
                const height = binding.modifiers.height || '80'; // 默认高度或从修饰符获取
                let videoElement: any = null

                // 创建视频元素
                const createVideoElement = () => {
                    videoElement = document.createElement('video');
                    videoElement.setAttribute('controls', false);
                    const source = document.createElement('source');
                    source.src = videoSrc;
                    source.type = 'video/mp4'; // 根据实际情况调整视频类型
                    videoElement.appendChild(source);
                    videoElement.width = width; // 设置宽度
                    videoElement.height = height; // 设置高度
                    videoElement.className = 'border-radius-5'

                    el.appendChild(videoElement);
                };

                // 占位元素，用来在视频加载前占据空间
                const placeholder = document.createElement('div');
                placeholder.className = 'placeholder';
                // placeholder.style.paddingTop = '56.25%'; // 16:9 纵横比
                el.appendChild(placeholder);

                // 使用 Intersection Observer 监听元素是否进入视口
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            if (!videoElement) {
                                createVideoElement(); // 当元素进入视口时创建视频元素
                            }
                            observer.unobserve(el); // 停止观察当前元素
                        }
                    });
                });

                observer.observe(el);
            }
        });
    }
}

export const videoThumbnail = {
    install(app: any) {
        app.directive('video-thumbnail', {
            mounted(el: HTMLElement, binding: DirectiveBinding, vnode: any) {
                const videoSrc = binding.value;
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                const img = new Image();

                const video = document.createElement('video');
                video.setAttribute('crossorigin', 'anonymous'); // 如果视频来自不同的域，请确保服务器支持CORS
                video.src = videoSrc;

                video.addEventListener('loadeddata', () => {
                    // 设置canvas尺寸与视频相同
                    canvas.width = 120
                    canvas.height = 80
                    // 自动播放视频几秒后暂停以获取某一帧作为封面
                    video.play();
                    setTimeout(() => {
                        // 绘制当前帧到canvas
                        ctx.drawImage(video, 0, 0, 120, 80);
                        const toDataURL = canvas.toDataURL('image/png');
                        img.src = toDataURL
                        img.className = 'image border-radius-5';
                        // 停止视频播放
                        video.pause();
                    }, 2000); // 等待2秒，可根据需要调整时间
                });

                // 如果需要显示视频控件，可以将video元素也添加到DOM中
                el.appendChild(img);
            }
        });
    }
}



